<!DOCTYPE html>
<html>
<head>
    <title>维修地图</title>
    <#include "header.html">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        #app{
            margin-top: 0px;
            margin-left: 0px;
            margin-right: 0px;
        }
        /*body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}*/
        #allmap{width:100%;height:550px;}
        /*p{margin-left:5px; font-size:14px;}*/
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2qndalF0BEaoYYKoDIQlQkvK7kB96vUV"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<div id="app">
    <mt-header title="维修地图"></mt-header>
    <div id="allmap"></div>
    <mt-button type="primary">进入列表</mt-button>
</div>
<span id="pointneedfix" style="display: none">${pointneedfix}</span>
</body>
</html>
<script type="text/javascript">
    var map_info = $("#pointneedfix").text();
    var a;
    if(null != map_info && 'null' != map_info){
        a = JSON.parse(map_info);
    }

    var vm =  new Vue({
        el: '#app',
        data: {
            data_info: []
        }
    })

    for (var kkpoint in a) {
        var onepoint = []
        onepoint.push(a[kkpoint].longtitude);
        onepoint.push(a[kkpoint].atitude);
        onepoint.push(a[kkpoint].desc);
        vm.data_info.push(onepoint);
    }
    // 百度地图API功能
    map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.506363,39.953382), 13);
    // var data_info = $("#pointneedfix").text();
    // vm.data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
    //     [116.406605,39.921585,"地址：北京市东城区东华门大街"],
    //     [116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
    // ];
    var opts = {
        width : 250,     // 信息窗口宽度
        height: 80,     // 信息窗口高度
        title : "信息窗口" , // 信息窗口标题
        enableMessage:true//设置允许信息窗发送短息
    };
    var startpp,endpp;
    var middlepp = [];
    for(var i=0;i<vm.data_info.length;i++){
        var pp = new BMap.Point(vm.data_info[i][0],vm.data_info[i][1]);
        if (i==0) {
            startpp = pp;
        } else if (i==(vm.data_info.length-1)) {
            endpp = pp;
        } else {
            middlepp.push(pp);
        }
        var marker = new BMap.Marker(pp);  // 创建标注
        var content = vm.data_info[i][2];
        map.addOverlay(marker);               // 将标注添加到地图中
        addClickHandler(content,marker);
    }

    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    driving.search(startpp, endpp,{waypoints:middlepp});//waypoints表示途经点

    function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)}
        );
    }
    function openInfo(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }

</script>
